import {
  createInbizSchema,
  createBaseSchema,
  createValidatorSchema,
  createComponentStyleSchema,
  createDecoratorStyleSchema,
  createModelSchema,
  createSoureSchema,
  createComponentLayout,
  createControllerSchema,
} from '@inbiz/setters';
import MultilingualInput from '@inbiz/basic/MultilingualInput';
import { createBehavior, createResource } from '@inbiz/core';
import ConfigModal from './components/configModal';
import { Cascader as LocaleCascader } from './locale';

export const defaultProps = {
  placeholder: 'Cascader.plaseSelect',
  multiple: false,
  showCheckedStrategy: 'SHOW_PARENT',
  targetLevel: 'leaf',
  storageMode: 'model',
  configModalValue: { currentIdField: '', labelField: '', parentIdField: '' },
  // configModalValue: { currentIdField: 'id', labelField: 'name', parentIdField: 'parentId' },
};

export const propsSchema = createInbizSchema({
  attribute: {
    ...createBaseSchema({
      placeholder: {
        type: 'string',
        'x-decorator': 'FormItem',
        'x-component': MultilingualInput,
      },
      targetLevel: {
        type: 'string',
        enum: ['leaf', 'any'],
        'x-decorator': 'FormItem',
        'x-component': 'Select',
      },
      multiple: {
        type: 'boolean',
        'x-decorator': 'FormItem',
        'x-component': 'Switch',
      },
      showCheckedStrategy: {
        type: 'string',
        enum: ['SHOW_PARENT', 'SHOW_CHILD'],
        'x-decorator': 'FormItem',
        'x-component': 'Select',
        'x-reactions': {
          dependencies: ['.multiple'],
          fulfill: {
            state: {
              visible: '{{$deps[0] === true}}',
            },
          },
        },
      },
      configModalValue: {
        type: 'object',
        'x-decorator': 'FormItem',
        'x-component': (props: any) => {
          return <ConfigModal {...props} />;
        },
        'x-reactions': {
          dependencies: ['form.senior.soure.sourceModelUpdate'],
          fulfill: {
            schema: {
              //@ts-ignore
              'x-component-props.update': '{{$deps[0]}}',
            },
          },
        },
      },
    }),
    ...createValidatorSchema(),
  },
  style: {
    ...createComponentStyleSchema(),
    ...createComponentLayout(),
    ...createDecoratorStyleSchema(),
  },
  senior: {
    ...createModelSchema({
      childModelConfig: {
        type: 'boolean',
        'x-decorator': 'FormItem',
        'x-component': 'Switch',
      },
      storageConfig: {
        type: 'object',
        'x-decorator': 'FormItem',
        'x-component': 'StorageConfig',
        'x-component-props': {
          type: 'cascader',
          // disabledRow: [{ modelAttr: 'text', componentAttr: 'name' }],
        },
        'x-reactions': {
          dependencies: ['.childModelConfig'],
          fulfill: {
            state: {
              visible: "{{$deps == 'true'}}",
            },
          },
        },
      },
    }),
    ...createSoureSchema(),
  },
  controller: createControllerSchema({
    events: [
    {
      name: "onSuccess",
      label: "请求成功"
    },
    {
      name: "onError",
      label: "请求失败"
    },
    {
      name: "onSelect",
      label: "选中事件"
    },
    {
      name: "onDropdownVisibleChange",
      label: "显隐浮层回调事件"
    },
    {
      name: "onParamFormat",
      label: "格式化参数",
      isConfigEvent: true
    },
    {
      name: "onRequest",
      label: "自定义请求",
      isConfigEvent: true
    },
    {
      name: "onData",
      label: "格式化数据",
      isConfigEvent: true
    },
    {
      name: "onTextParamFormat",
      label: "子节点格式化参数",
      isConfigEvent: true
    },
    {
      name: "onTextRequest",
      label: "子节点自定义请求",
      isConfigEvent: true
    },
    {
      name: "onTextData",
      label: "子节点格式化数据",
      isConfigEvent: true
    }]
  })
});

export const Behavior = createBehavior({
  extends: ['Field'],
  name: 'Cascader',
  selector: (node) => node.props?.['x-component'] === 'Cascader',
  designerLocales: LocaleCascader,
  designerProps: { propsSchema },
});

export const Resource = createResource({
  icon: 'Cascade',
  elements: [
    {
      componentName: 'Field',
      props: {
        type: 'array',
        title: {
          value: 'Cascader.title',
          status: true,
        },
        'x-component': 'Cascader',
        'x-decorator': 'FormItem',
        'x-component-props': defaultProps,
      },
    },
  ],
});
